<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>

        html{
            margin: 50px;
            border: 2px blue solid;
        }

        body{

            margin: 100px;
            border: 2px red solid;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }


        .box2{
            width: 50%;
            height: 50%;
            background-color: tomato;
            /*
                绝对定位
                    - 将元素的position设置为absolute，则开启了元素的绝对定位
                    - 特点：
                        1. 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
                        2. 开启绝对定位后，元素会脱离文档流，同时元素性质发生变化
                        3. 绝对定位元素是参照于离它最近的开启了定位的祖先元素进行定位,
                            如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位
                            所以在开发中，经常在为一个元素开启绝对定位后，同时也给它的父元素开启相对定位
                        4. 绝对定位会提升元素的层级


                        3. 绝对定位是参照于它的包含块进行定位的！

                        绝对定位元素的包含块是谁？
                            - 绝对定位元素的包含块是离它最近的开启了定位的祖先元素
                            - 如果所有的祖先都没有开启定位，则它的包含块是初始包含块
                            - 初始包含块的大小和视口是相同

            */

            position: absolute;
            bottom: 0px;
            right:0px;

        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: orange;
            /*position: relative;*/
        }
        .box5{
            width: 300px;
            height: 300px;
            margin-left: 100px;
            background-color: #706f6f;
            /*position: relative;*/

        }


    </style>
</head>
<body>
<!--
    布局手段：
        1. 盒子模型（纵向）
        2. 浮动（横向）
        3. 定位

    定位（position）
        - 通过定位可以将一个元素摆放到页面中的任意位置
        - CSS中共有四种定位方式：
            1.相对定位
            2.绝对定位
            3.固定定位
            4.粘滞定位

-->

<div class="box1"></div>
<div class="box4">
    <div class="box5">
        <div class="box2"></div>
    </div>
</div>
<div class="box3"></div>
</body>
</html>